<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>榴莲科技</title>
    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 公用css -->
    <link href="../css/sb-admin-2.css" rel="stylesheet">
    <!-- 表格样式 -->
    <link rel="stylesheet" href="../bower_components/bootstrap/js/bootstrap-table.min.css">
    <!-- 字体图标 -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- 文本编辑器样式 -->
    <link rel="stylesheet" href="../js/summernote/font-awesome.min.css">
    <link href="../js/summernote/summernote.css" rel="stylesheet" type="text/css">
    <!-- 多选添加 -->
    <link href="../js/froms/style-metro.css" rel="stylesheet" type="text/css">
    <link href="../js/froms/select2_metro.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
            <!-- 标题部分 -->
            <div class="bootom10">
                <div class="col-lg-12 manage-head">
                    <h6 class="panel-title">tab切换与列表</h6>
                </div>
                <!-- /.col-lg-12 -->
            </div>
           <!-- tab切换 -->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">列表数据</a>
                </li>
                <li><a href="#ios" data-toggle="tab">表单数据</a></li>

            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <!-- 列表引用开始 -->
                    <div class="panel-table">
                        <div class="manage-time">开始时间:<input class="form_datetime form-control right10" type="text" id="form_datetime" value="2016-03-07" size="16"> 姓名:<input class=" form-control right10" type="text"  size="16"> <button type="button" class="btn btn-primary">查询</button></div>
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover" id="yes" >

                            </table>
                        </div>
                    </div>
                    <!-- 列表引用结束 -->
                </div>
                <div class="tab-pane fade" id="ios">
                    <!-- 表单引用开始 -->
                    <form>
                        <div class="form-table">
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>姓名：</label>
                                <div class="form-div"><input class=" form-control" type="text" placeholder="请输入姓名"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>性别：</label>
                                <div class="form-div"><input class=" form-control" type="radio" name="sex" > 男 <input class=" form-control" name="sex"  type="radio"> 女</div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>爱好：</label>
                                <div class="form-div"><input class=" form-control" type="checkbox" name="sex" > 音乐 <input class=" form-control" name="sex"  type="checkbox"> 足球 <input class=" form-control" name="sex"  type="checkbox"> 爬山</div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>分组类别：</label>
                                <div class="form-div"><select><option>类别一</option><option>类别二</option><option>类别三</option></select></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>开始时间：</label>
                                <div class="form-div"><input class=" form-control form_datetime" id="st_datetime" type="text" placeholder="请输入开始时间"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>结束时间：</label>
                                <div class="form-div"><input class=" form-control form_datetime" id="end_datetime"  type="text" placeholder="请输入结束时间"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>模糊搜索：</label>
                                <div class="form-div"><input type="hidden" class="form-select2 span12 select2_sample2"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>多选添加：</label>
                                <div class="form-div"><input type="hidden" class="form-select2 span12 select2_sample3" value="足球, 篮球"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>描述：</label>
                                <div class="form-div"><textarea placeholder="请输入您要输入的内容"></textarea></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>图片上传：</label>
                                <div class="form-div">
                                    <div class="uploadimg">
                                        <span class="uploadimg-title">
                                            可上传<span class="uploadimg-num">5</span>张
                                        </span>
                                        <div class="uploadimg-add">
                                            <div class="add-img"></div>
                                            <input type="file" class="addimg-file f-pa">
                                        </div>
                                        <div class="addimg-num">
                                            <span id="addimgCount">0</span>/5
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>文本编辑：</label>
                                <div class="form-div" >
                                    <div class="summernote" ></div>
                                </div>
                            </div>
                        </div>
                        <div class="middle"><button type="button" class="btn btn-primary">提交</button> <button type="button" class="btn btn-danger">取消</button></div>

                    </form>
                    <!-- 表单引用结束 -->
                </div>

            </div>


    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/bootstrap/js/bootstrap-table.min.js"></script>
    <!-- 汉化表格   -->
    <script src="../bower_components/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
     <!-- 时间控件   -->
     <script src="../js/laydate/laydate.js"></script>
      <!-- 文本编辑器 -->
      <script src="../js/summernote/summernote.min.js"></script>
       <!-- 多选添加 -->
      <script src="../js/froms/select2.min.js"></script>
      <script src="../js/froms/app.js"></script>
      <script src="../js/froms/form-samples.js"></script>

<script type="text/javascript">
    $(function () {
        //时间插件引入
        laydate({
            elem: '#st_datetime'
        })
        laydate({
            elem: '#end_datetime'
        })
        //编辑器引入
        $('.summernote').summernote({
            height: 100,
            focus: true
        });
        //图片上传
        $(".addimg-file").change(function(e){
            var files = this.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /image.*/;
                var addimg = document.createElement("img");

                addimg.classList.add("obj");
                addimg.file = file;

                var div=$("<div class='g-addimg'><span class='close'>×</span></div>");

                var appendImg = $(div).append(addimg);

                var reader = new FileReader();
                reader.onload = (function(aImg){
                    return function(e){
                        aImg.src = e.target.result;
                    };
                })(addimg);
                reader.readAsDataURL(file);
                $(this).parent(".uploadimg-add").append(div);

                var addimgL = $(".g-addimg").length;
                $("#addimgCount").text(addimgL);
                var numCount = $(this).parents().find(".uploadimg-num");
                numCount.text(5-addimgL);
                if(addimgL>5){
                    appendImg.remove();
                    $("#addimgCount").text(addimgL-1);
                    $(".uploadimg-num").text(0);
                }
            }
        });
        //鼠标经过上传之后的图片出现蒙层+删除，点击删除，图片删除
        $(".uploadimg").on("mouseover",".g-addimg",function(){
            $(this).addClass("on");
        });
        $(".uploadimg").on("mouseleave",".g-addimg",function(){
            $(this).removeClass("on");
        });
        $(".uploadimg").on("click",".g-addimg",function(){
            $(this).remove();
            var addimgL = $(".g-addimg").length;
            $("#addimgCount").text(addimgL);
            $(".uploadimg-num").text(5-addimgL);
        });
    })
    //表单多选，模糊查询引入
    jQuery(document).ready(function() {

        // initiate layout and plugins

        App.init();

        FormSamples.init();

    });
    var editor;
    $(function () {
        var hig=$(window).height();
        $('#yes').bootstrapTable({
            method: 'get',
            cache: false,
            height: hig-150,//表格高度
            striped: true,
            pagination: true, //在表格底部显示分页工具栏
            pageSize: 10, //默认每页条数
            pageNumber:1, //默认分页
            pageList: [10, 20, 50, 100, 200, 500],//分页数
            showColumns: true, //显示隐藏列
            showRefresh: true, //显示刷新按钮
            showExport: true,
            search: false,//显示搜素表单
            silent: true,  //刷新事件必须设置
            clickToSelect: true, //复选框只能选择一条记录
            columns: [{field:"user_email",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"user_company",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"user_dates",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"user_lastlogintime",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"user_version",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"user_isv2",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"userstatus_usertype",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"userstatus_package_id",title:"示例标题",align:"center",valign:"middle",sortable:"true"},{field:"userstatus_end_time",title:"示例标题",align:"center",valign:"middle",sortable:"true"}],
            data :[
                {
                    "user_email": "20dai.rikon@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "<a href='javascript:'>修改</a> <a href='javascript:'>删除</a>"
                },
                {
                    "user_email": "20140416@xxxxddffg.com",
                    "user_company": "NULL",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "1",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100001",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "20083matsumoto-hs@polus.co.jp",
                    "user_company": "",
                    "user_dates": "2014-10-31 13:02:47",
                    "user_lastlogintime": "1414726074",
                    "user_version": "0",
                    "user_isv2": "1",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "20.2.n0.5@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-11-21 11:00:10",
                    "user_lastlogintime": "1416564204",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "1st.pocket.wars@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1hourbunko@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-10-18 07:52:40",
                    "user_lastlogintime": "1413618760",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1chan.723@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1a2y0a2@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1@1.com",
                    "user_company": "NULL",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "1",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100001",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1@1.cn",
                    "user_company": "NULL",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "1",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100001",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "19790220.rie@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "1410998738",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "19711216@kamoshita-naoya.jp",
                    "user_company": "xxxx",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "19273587@qq.com",
                    "user_company": "",
                    "user_dates": "2014-12-08 09:03:38",
                    "user_lastlogintime": "1418029418",
                    "user_version": "0",
                    "user_isv2": "1",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "19267224@qq.com",
                    "user_company": "",
                    "user_dates": "2014-10-24 16:00:09",
                    "user_lastlogintime": "1411444446",
                    "user_version": "1",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100001",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "19.rainwater@gmail.com",
                    "user_company": "",
                    "user_dates": "2014-12-08 16:43:04",
                    "user_lastlogintime": "1418056984",
                    "user_version": "0",
                    "user_isv2": "1",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "189836234@qq.com",
                    "user_company": "NULL",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "1",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100001",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1874560645@qq.comsara2014",
                    "user_company": "NULL",
                    "user_dates": "2014-12-03 07:25:19",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "1",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "18616026485@163.com",
                    "user_company": "",
                    "user_dates": "2014-10-13 13:35:51",
                    "user_lastlogintime": "0",
                    "user_version": "1",
                    "user_isv2": "0",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100001",
                    "userstatus_end_time": "NULL"
                },
                {
                    "user_email": "1848837120@qq.com",
                    "user_company": "NULL",
                    "user_dates": "2014-10-20 08:08:59",
                    "user_lastlogintime": "0",
                    "user_version": "0",
                    "user_isv2": "1",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                },
                {
                    "user_email": "172306759@qq.com",
                    "user_company": "",
                    "user_dates": "2014-10-30 05:09:21",
                    "user_lastlogintime": "1414645761",
                    "user_version": "0",
                    "user_isv2": "1",
                    "userstatus_usertype": "0",
                    "userstatus_package_id": "100014",
                    "userstatus_end_time": "0"
                }
            ],formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },

            formatNoMatches: function(){
                return '无符合条件的记录';
            }
        });

      //屏幕尺寸改变刷新
        $(window).resize(function () {
            $('#yes').bootstrapTable('resetView');
        });
        laydate({
            elem: '#form_datetime'
        })


    })
</script>
<!-- 弹出层内容 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">充值标题</h4>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
